<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<style>
			dl,dt,dd,h4 {
				margin: 0;
				padding: 0;
			}
			html,
			body {
				background-color: #efeff4;
			}

			.overflow {
				overflow: hidden;
			}

			p {
				margin-bottom: 0;
				color: #49483E;
			}
			.gradeBox {
				margin: 10px 0;
				padding: 10px 0;
				background-color: white;
			}
			.grade {
				width: 80px;
				text-align: center;
			}
			.stars p {
				width: 40px;
				text-align: center;
			}
			.stars .overflow {
				padding: 5px 0;
			}
			.stars .mui-pull-left {
				margin-left: 5px;
			}
			.stars .gradeNum {
				color: #f99707;
			}
			.grade.mui-pull-left h2{
				color: #f99707;
			}
			.grade.mui-pull-right h2,.grade.mui-pull-right p{
				color: #888;
			}
			.stars i {
				margin: 0 2px;
			}
			.gradeLists {
				padding: 5px 6px;
				background: white;
				border-bottom: 1px solid #EFEFF4;
			}
			.gradeLists span {
				display: inline-block;
				padding: 3px 8px;
				border: 1px solid #ccc;
				font-size: 14px;
				margin: 5px;
				border-radius: 3px;
			}
			.gradeLists .active {
				background: rgba(249,151,7,.1);
				border-color: #f99707;
				color: #f99707;
			}
			.gradeLists .bad {
				color: darkgray;
			}
			.gradeMsg {
				background: #fff;
			}
			.gradeMsg dl {
				padding: 10px 8px;
				border-bottom: 1px solid #EFEFF4;
			}
			.gradeMsg dt {
				width: 50px;
			}
			.gradeMsg dt img {
				display: block;
				width: 40px;
				height: 40px;
				border-radius: 20px;
				margin: 0 auto;
			}
			.gradeMsg .title,.gradeMsg .title h4 {
				line-height: 28px;
			}
			.gradeMsg .title h4 {
				font-size: 16px;
			}
			.gradeMsg .title p {
				margin-right: 5px;
			}
			.gradeMsg .starBox {
				line-height: 24px;
				height: 24px;
				font-size: 14px;
				margin-bottom: 12px;
			}
			.gradeMsg .starBox img {
				display: block;
				height: 12px;
				margin-top: 6px;
				margin-right: 10px;
			}
			.showGradeImg img {
				display: block;
				width: 180px;
				height: 180px;
			}
			.showGradeImg.more img {
				width: 94px;
				height: 94px;
				margin-right: 5px;
			}
		</style>
	</head>

	<body>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="gradeBox overflow" id="gradeMsg">
					<div class="grade_left mui-pull-left">
						<div class="grade mui-pull-left">
							<h2>4.5</h2>
							<p>商家评分</p>
						</div>
						<div class="stars mui-pull-left">
							<div class="overflow" id="taste">
								<p class="mui-pull-left">口味</p>
								<star class="mui-pull-left"></star>
								<p class="mui-pull-left gradeNum">3.6</p>
							</div>
							<div class="overflow" id="pack">
								<p class="mui-pull-left">包装</p>
								<star class="mui-pull-left"></star>
								<p class="mui-pull-left gradeNum">5.0</p>
							</div>
						</div>
					</div>
					<div class="grade_right grade mui-pull-right">
						<h2>4.9</h2>
						<p>配送评分</p>
					</div>
				</div>
				<div class="gradeLists">
					<span id="all" class="active">
						全部(161)
					</span>
					<span id="pic">
						有图(19)
					</span>
					<span id="good">
						好评(151)
					</span>
					<span id="bad" class="bad">
						差评(4)
					</span>
					<!--<span id="delicious">
						好吃(13)
					</span>
					<span id="enough">
						分量足(9)
					</span>-->
				</div>
				<div class="gradeMsg">
					<dl class="overflow">
						<dt class="mui-pull-left"><img src="images/timg.jpg"/></dt>
						<dd class="mui-pull-left">
							<div class="overflow title">
								<h4 class="mui-pull-left">用户名称用户名称</h4>
								<p class="time mui-pull-right">2017.08.16</p>
							</div>
							<div class="starBox overflow">
								<img src="images/4.png" class="mui-pull-left"/>
								<span class="time mui-pull-left">30分钟送达</span>
							</div>
							<div class="gradeText">
								好吃,分量足,好吃,分量足,好吃,分量足,好吃,分量足
							</div>
							<div class="showGradeImg overflow">
								<img src="images/timg2.jpg"/ class="mui-pull-left">
							</div>
						</dd>
					</dl>
					<dl class="overflow">
						<dt class="mui-pull-left"><img src="images/timg.jpg"/></dt>
						<dd class="mui-pull-left">
							<div class="overflow title">
								<h4 class="mui-pull-left">用户名称用户名称</h4>
								<p class="time mui-pull-right">2017.08.16</p>
							</div>
							<div class="starBox overflow">
								<img src="images/5.png" class="mui-pull-left"/>
								<span class="time mui-pull-left">30分钟送达</span>
							</div>
							<div class="gradeText">
								好吃,分量足,好吃,分量足,好吃,分量足,好吃,分量足
							</div>
							<div class="showGradeImg more overflow">
								<img src="images/timg2.jpg"/ class="mui-pull-left">
								<img src="images/timg2.jpg"/ class="mui-pull-left">
								<img src="images/timg2.jpg"/ class="mui-pull-left">
							</div>
						</dd>
					</dl>
					<dl class="overflow">
						<dt class="mui-pull-left"><img src="images/timg.jpg"/></dt>
						<dd class="mui-pull-left">
							<div class="overflow title">
								<h4 class="mui-pull-left">用户名称用户名称</h4>
								<p class="time mui-pull-right">2017.08.16</p>
							</div>
							<div class="starBox overflow">
								<img src="images/2.png" class="mui-pull-left"/>
								<span class="time mui-pull-left">30分钟送达</span>
							</div>
							<div class="gradeText">
								好吃,分量足,好吃,分量足,好吃,分量足,好吃,分量足
							</div>
							<div class="showGradeImg overflow">
								<img src="images/timg2.jpg"/ class="mui-pull-left">
							</div>
						</dd>
					</dl>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/showStar.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			Vue.component('star',{
				template:'<div id="showStar">'
						+'<i class="iconfont icon-empty" data-index="1"></i>'
						+'<i class="iconfont icon-empty" data-index="2"></i>'
						+'<i class="iconfont icon-empty" data-index="3"></i>'
						+'<i class="iconfont icon-empty" data-index="4"></i>'
						+'<i class="iconfont icon-empty" data-index="5"></i>'
						+'</div>'
			})
			var vm = new Vue({
				el: '#gradeMsg',
				data: {},
				mounted: function() {
					this.init();
				},
				methods: {
					init: function() {
						mui.init({
							swipeBack: false,
							keyEventBind: {
								backbutton: false //关闭back按键监听
							},
							pullRefresh: {
								container: '#pullrefresh',
								up: {
									contentrefresh: '正在加载...',
									callback: pullupRefresh
								}
							}
						});
						var count = 0;
						/**
						 * 上拉加载具体业务实现
						 */
						function pullupRefresh() {
							setTimeout(function() {
								mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。

							}, 1000);
						}
						/**
						 * 显示评价
						 */
						compare(3.6,'taste');
						compare(5.0,'pack');
						/**
						 * 计算dd的宽度
						 */
						var winW = $(window).width(),
							dtW  = $('dt').width(),
							ddW  =(winW-dtW-16)+'px';
						$('dd').width(ddW)
					}

				}
			})
		</script>
	</body>

</html>